<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>07_事件处理</title>
    </head>
    <body>
        <!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

        <div id="example">
            <h2>1. 绑定监听</h2>
            <!-- 这种绑定参数就是event, -->
            <button @click="handler1">参数是event</button>
            <!-- 写函数调用参数就是这个参数，没有event事件,event事件必须要这个样子写 -->
            <button @click="handler2(1,2,3)">参数是</button>
            <!-- 传的参数和event事件也可得到 -->
            <button @click="handler3(1,2,3,$event)">参数是1,2,3,$e</button>
            <h2>2. 事件修饰符</h2>
            <!-- prevent阻止默认行为 -->
            <a href="http://atguigu.com" @click="handler4">a连接</a>
            <a href="http://atguigu.com" @click.prevent="handler5">a连接</a>
            <a href="http://atguigu.com" @click.prevent>a连接</a>
            <!-- stop阻止冒泡，由最精确的事件到最不精确事件 -->
            <div
                style="width: 200px; height: 100px; background-color: pink"
                @click="handler7"
            >
                <div
                    style="background-color: green; width: 50px; height: 50px"
                    @click="handler6"
                >
                    222
                </div>
            </div>
            <h2>3. 按键修饰符</h2>
            <input type="text" 
            @keyup='handler8'>
            <input type="text" @keyup.13='handler9'>
            <input type="text" @keyup.enter='handler9'>
        </div>

        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#example',
                methods: {
                    handler1(e) {
                        console.log(e)
                    },
                    handler2(...args) {
                        console.log(args)
                    },
                    handler3(...args) {
                        console.log(args)
                    },
                    handler4(e) {
                        e.preventDefault()
                    },
                    handler5() {},
                    handler6() {
                        console.log(333)
                    },

                    handler7() {
                        console.log("capture")
                    },
                    handler8(e){
                      if(e.keyCode===13){
                        console.log(1);
                        
                      }
                    },
                    handler9() {
                        console.log("capture")
                    },
                    
                },
            })
        </script>
    </body>
</html>
